<!DOCTYPE html>
<html class="ui-page-login">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="../../css/mui.min.css" rel="stylesheet"/>
	<style>
		.mui-input-group:first-child {
			margin-top: 20px;
		}
		
		.mui-btn {
			padding: 10px;
		}
		
	</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<h1 class="mui-title">登录</h1>
	</header>
	<div class="mui-content">
		<form id='login-form' class="mui-input-group">
			<div class="mui-input-row">
				<label>账号</label>
				<input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
			</div>
			<div class="mui-input-row">
				<label>密码</label>
				<input id='password' type="password" class="mui-input-password" placeholder="请输入密码">
			</div>
		</form>
		<div class="mui-content-padded">
			<button id='login' class="mui-btn mui-btn-block mui-btn-primary">登录</button>
		</div>
	</div>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/login/login.js"></script>
	<script type="text/javascript" charset="utf-8">
	  	(function($, doc) {
	  		$.plusReady(function() {
				plus.screen.lockOrientation("portrait-primary"); //锁定页面正方向
				var mainPage = plus.webview.getWebviewById("main");
				var main_loaded_flag = false;
				if(!mainPage){
					mainPage = $.preload({
						"id": 'main',
						"url": '../main/main.html'
					});
				}else{
					main_loaded_flag = true;
				}
				mainPage.addEventListener("loaded",function () {
					main_loaded_flag = true;
				});
				var toMain = function() {
					//使用定时器的原因：
					//可能执行太快，main页面loaded事件尚未触发就执行自定义事件，此时必然会失败
					var id = setInterval(function () {
						if(main_loaded_flag){
							clearInterval(id);
							$.fire(mainPage, 'show', null);
							mainPage.show("pop-in");
						}
					},20);
				};
				
				var loginButton = doc.getElementById('login');
				var accountBox = doc.getElementById('account');
				var passwordBox = doc.getElementById('password');
				loginButton.addEventListener('tap', function(event) {
					var loginInfo = {
						account: accountBox.value,
						password: passwordBox.value
					};
					login.check(loginInfo,function(err){
						if (err) {
							plus.nativeUI.toast(err);
							return;
						}
						toMain();
					})
				});
			});
	  	}(mui, document));
	</script>
</body>
</html>